<template lang="pug">
  div
    section.formPart
      h2 线索信息
      form-box(
        ref="basicForm"
        :fields="basicField"
        :showBtns="false"
        :formProps="{ disabled, 'label-position': 'top' }"
        :layoutCol="{ xs: 12, md: 12, lg: 12 }"
      )
    section.formPart
      h2 宝宝信息
      form-box(
        ref="babyForm"
        :fields="babyFields"
        :showBtns="false"
        :formProps="{ disabled, 'label-position': 'top' }"
        :layoutCol="{ xs: 12, md: 8, lg: 8 }"
      )
    section.formPart
      h2 家长信息
      form-box(
        ref="parentForm"
        :fields="parentFields"
        :showBtns="false"
        :formProps="{ disabled, 'label-position': 'top' }"
        :layoutCol="{ xs: 12, md: 8, lg: 8 }"
      )
</template>
<script>
import { mapGetters } from 'vuex'
import { regs } from '@/utils/validate'
import { getChannels } from '../api'

export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    inType: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitting: false,
      detail: this.info,
      channels: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    basicField () {
      const { detail, inType } = this
      return [
        {
          label: '线索来源',
          key: 'channelId',
          type: 'select',
          rules: [{ required: true, message: '请输入' }],
          initialValue: detail.channelId,
          fieldProps: {
            options: this.channels
          },
          events: {
            change: val => this.formChange(val, 'channelId')
          }
        },
        {
          label: '线索方式',
          key: 'category',
          type: 'select',
          hidden: inType !== 'clue',
          initialValue: detail.category?.toString(),
          fieldProps: {
            disabled: false,
            options: [
              { id: '1', name: '主动' },
              { id: '2', name: '被动' }
            ]
          }
        },
        {
          label: '客户分类',
          key: 'clienteleType',
          type: 'select',
          disabled: true,
          hidden: inType !== 'client',
          initialValue: detail.clienteleType,
          fieldProps: {
            dictKey: 'clienteleType'
          }
        }
      ]
    },
    babyFields () {
      const { detail } = this
      return [
        {
          label: '孩子姓名',
          key: 'childName',
          rules: [{ required: true, message: '请输入' }],
          initialValue: detail.childName
        },
        {
          label: '昵称',
          key: 'nickName',
          initialValue: detail.nickName
        },
        {
          label: '性别',
          key: 'gender',
          type: 'select',
          initialValue: detail.gender?.toString(),
          fieldProps: {
            dictKey: 'sex',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '出生年月',
          key: 'birthday',
          type: 'date',
          formatFlag: true,
          rules: [{ required: true, message: '请输入' }],
          initialValue: detail.birthday
        },
        {
          label: '英文名',
          key: 'englishName',
          initialValue: detail.englishName
        },
        {
          label: '户口所在地',
          key: 'registerResidence',
          initialValue: detail.registerResidence
        },
        {
          label: '国籍',
          key: 'nationality',
          initialValue: detail.nationality
        },
        {
          label: '目标幼儿园',
          key: 'targetGarden',
          initialValue: detail.targetGarden
        },
        {
          label: '血型',
          key: 'bloodType',
          type: 'select',
          initialValue: detail.bloodType,
          fieldProps: {
            dictKey: 'bloodType',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '儿童户籍类型',
          key: 'registerType',
          type: 'select',
          initialValue: detail.registerType,
          fieldProps: {
            options: [
              { id: '1', name: '本片' },
              { id: '2', name: '本区外片' },
              { id: '3', name: '本市外区' },
              { id: '4', name: '外籍' },
              { id: '5', name: '港澳台' }
            ]
          }
        },
        {
          label: '孩子语言环境',
          key: 'languageEnvironment',
          initialValue: detail.languageEnvironment,
          layoutCol: { xs: 12, md: 16, lg: 16 }
        }
      ]
    },
    parentFields () {
      const { detail } = this
      return [
        {
          label: '家长姓名',
          key: 'name',
          rules: [{ required: true, message: '请输入' }],
          initialValue: detail.name
        },
        {
          label: '关系',
          key: 'relationship',
          type: 'select',
          initialValue: detail.relationship,
          rules: [{ required: true, message: '请输入' }],
          fieldProps: {
            dictKey: 'relationships',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '联系电话',
          key: 'mobile',
          rules: [{ required: true, message: '请输入手机号码' }, { max: 11, pattern: regs.phone, message: '请输入正确的手机号码!' }],
          initialValue: detail.mobile
        },
        {
          label: '学历',
          key: 'degree',
          type: 'select',
          initialValue: detail.degree,
          fieldProps: {
            dictKey: 'educations',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '工作单位',
          key: 'company',
          initialValue: detail.company
        },
        {
          label: '职位',
          key: 'duty',
          type: 'select',
          initialValue: detail.duty,
          fieldProps: {
            options: [
              { id: '管理人员', name: '管理人员' },
              { id: '销售人员', name: '销售人员' },
              { id: '行政人员', name: '行政人员' },
              { id: '技术人员', name: '技术人员' }
            ]
          }
        },
        {
          label: '家庭地址',
          key: 'homeAddress',
          initialValue: detail.homeAddress,
          layoutCol: { xs: 24, md: 24, lg: 24 }
        }
      ]
    }
  },
  watch: {
    info: {
      handler (val = {}) {
        this.detail = val
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.getChannels()
  },
  methods: {
    // 线索来源
    getChannels () {
      getChannels({ areaId: this.curArea.areaId }).then(res => {
        this.channels = res
      })
    },
    // 表单值改变
    formChange (val, key) {
      if (key === 'channelId') {
        const channel = this.channels.find(x => x.id === val)
        this.detail = {
          ...this.detail,
          channelId: channel.id
        }
      }
    },
    // 提交
    async submitHandle () {
      const basicValues = await this.$refs.basicForm.submitForm()
      const babyValues = await this.$refs.babyForm.submitForm()
      const parentValues = await this.$refs.parentForm.submitForm()
      return {
        ...basicValues,
        ...babyValues,
        ...parentValues
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.formPart {
  h2 {
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  ::v-deep{
    .el-form-item__label{
      line-height: 1;
    }
  }
}
</style>
